#battle {
    background-color: #f6f6f6;
    width: 100%;
    height: 100%; // background: url('~img/battle1.png') repeat center center;
    // background-size: 48px 23px;
    .team {
        // border: 2px solid #1ABC9C;
        box-shadow: 2px 0px 3px #CBD2D8, -2px 0px 3px #CBD2D8, 0px -2px 3px #CBD2D8, 0px 2px 3px #CBD2D8;
        border-radius: 4px;
        width: 150px;
        margin-top: 5px;
        background-color: #E8EDF2; // height: 340px;
        padding-bottom: 40px;
        position: relative;
        overflow: hidden;
    }
    .round-text {
        color: #000;
        text-align: center;
        line-height: 30px;
    }
    .animation-box {
        top: 0;
        margin-top: -20px;
        width: 20px;
        height: 20px;
        background-color: #F54343;
        position: absolute;
        left: 10px;
        animation-timing-function: linear;
        animation-direction: normal;
        animation-duration: 1s;
        &.box1 {
            left: 30px;
        }
        &.box2 {
            left: 50px;
        }
        &.defendbox0 {
            top: 40px;
            animation-name: defend1;
        }
        &.defendbox1 {
            top: 134px;
            animation-name: defend2;
        }
        &.defendbox2 {
            top: 228px;
            animation-name: defend3;
        }
        @keyframes defend1 {
            from {
                top: 0px;
            }
            to {
                top: 40px;
            }
        }
        @keyframes defend2 {
            from {
                top: 40px;
            }
            to {
                top: 134px;
            }
        }
        @keyframes defend3 {
            from {
                top: 134px;
            }
            to {
                top: 228px;
            }
        }
    }
    .animation-number {
        color: #000;
        position: absolute;
        top: 24px;
        font-size: 13px;
        font-weight: bold;
        font-family: '04b-21';
        &.attackPos0 {
            left: 32px;
        }
        &.attackPos1 {
            left: 52px;
        }
        &.attackPos2 {
            left: 72px;
        }
        &.defenderPos0 {
            top: 24px;
        }
        &.defenderPos1 {
            top: 117px;
        }
        &.defenderPos2 {
            top: 211px;
        }
    }
    .role {
        padding-top: 40px;
        margin: 0 auto; // height: 100px; // border: 1px solid #fff;
        opacity: 0.8;
        .hp-par {
            margin: 0 auto;
            width: 132px;
            position: relative;
            background-color: #BDC3C7; // box-sizing: content-box;
            border-left: 6px solid #E9EDF2;
            border-right: 6px solid #E9EDF2;
            box-sizing: content-box;
            &.l-active {
                border-left: 6px solid #F54343;
                // animation-name: attack;
                // animation-timing-function: linear;
                // animation-direction: normal;
                // animation-duration: 0.5s;
                // animation-delay: 0.4s;
            }
            &.r-active {
                border-right: 6px solid #F54343;
                // animation-name: attack;
                // animation-timing-function: linear;
                // animation-direction: normal;
                // animation-duration: 0.5s;
                // animation-delay: 0.4s;
            }
            // &.active1 {
            //     animation-name: attack1;
            // }
            @keyframes attack {
                0% {
                    margin-left: 0;
                }
                50% {
                    margin-left: 10px;
                }
                100% {
                    margin-left: 0;
                }
            }
            @keyframes attack1 {
                0% {
                    margin-left: 0;
                }
                50% {
                    margin-left: 10px;
                }
                100% {
                    margin-left: 0;
                }
            }
            .shield {
                height: 10px;
                width: 100%;
                border: 2px solid #BDC3C7; // border-radius: 5px; 
                background-color: #f6f6f6; // box-sizing: border-box;
                .shield-item {
                    height: 100%; // height: 6px;
                    border-right: 2px solid #BDC3C7;
                    &.active {
                        background-color: #34495E;
                    }
                    &:last-child {
                        border-right-width: 0;
                    }
                }
            }
            .hp-content {
                height: 24px;
            }
            .hp-text {
                position: absolute;
                line-height: 14px;
                height: 14px;
                top: 0px;
                right: 0px;
                left: 0px;
                bottom: 0px;
                text-align: center;
                color: #34495E;
                font-family: '04b-21';
                font-size: 10px;
            }
            .hp-out {
                position: relative;
                width: 110px;
                margin: 0 auto;
                line-height: 14px;
                height: 14px;
                background-color: #ECF0F1;
                border-radius: 14px;
                box-shadow: 2px 0px 2px #666, -2px 0px 2px #666, 0px -2px 2px #666, 0px 2px 2px #666;
            }
            .hp {
                border-radius: 14px;
                height: 100%;
                line-height: 14px;
                height: 14px;
                width: 110px;
                background-color: #E74C3C;
                color: #000;
                transition: width 0.5s linear;
            }
            .pro-bar-container {
                height: 14px;
                border-radius: 14px;
                margin: 0 auto;
                width: 110px; // border: 1px solid #222;
                .pro-bar {
                    height: 14px;
                    border-radius: 14px;
                }
            }
        }
        .role-name {
            text-align: center;
            color: #fff;
            background-color: #1ABC9C;
            height: 20px;
            line-height: 20px; // border-bottom-left-radius: 5px;
            // border-bottom-right-radius: 5px;
            .icon {
                font-size: 16px;
                margin-right: 3px;
            }
        }
    }
    .battleMsg {
        // background-color: #2C3E50;
        .battleMsgContent {
            text-align: center;
            color: #000;
            overflow: auto;
        }
    }
    .bottom {
        height: 45px;
    }
    .leave-button {
        width: 60px;
        padding: 3px 0px;
        background-color: #2ECC71;
        box-shadow: 3px 0px 3px #666, -3px 0px 3px #666, 0px -3px 3px #666, 0px 3px 3px #666;
        color: #000;
        text-align: center;
        border-radius: 4px;
    }
}